<!-- 设被巡检-缺失管理页面 -->
<template>
  <div>
    <div class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="任务编号">
              <px-input
                v-model="queryParams.relationNumber"
                placeholder="请输入任务编号"
                maxlength="50"
                clearable
                @blur="queryParams.relationNumber = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="缺失编号">
              <px-input
                v-model="queryParams.missingId"
                placeholder="请输入缺失编号"
                maxlength="50"
                clearable
                @blur="queryParams.missingId = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="6">
            <px-form-item label="缺失类型">
              <px-select v-model="queryParams.missingType" placeholder="请选择缺失类型" filterable clearable>
                <px-option v-for="(item, index) in missingTypeList" :key="index" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="状态">
              <px-select v-model="queryParams.rectifyStatus" placeholder="请选择状态" filterable clearable>
                <px-option v-for="(item, index) in rectifyStatusList" :key="index" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="上报日期" prop="reportDate">
              <px-date-picker
                v-model="queryParams.reportDate"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                unlink-panels
                @change="changeDate"
              />
            </px-form-item>
          </px-col>
          <px-col style="flex-grow: 1; max-width: fit-content" :span="6">
            <px-button v-has="'ALL_EQUIP_INSPECT_FAULT_DOWNLOAD'" type="primary" @click="batchDownload">查询并导出</px-button>
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
        <!-- <px-row class="flex-end">
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row> -->
      </px-form>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 306px)" border>
        <px-table-column label="序号" width="80" align="center" fixed="left">
          <template #default="{ $index }">
            {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span v-if="item.missingId">
              <span v-if="isHasPermission('ALL_EQUIP_INSPECT_FAULT_VIEW')" style="color: #3b82f6; cursor: pointer" @click="handleView(scope.row)">{{
                scope.row.missingId
              }}</span>
              <span v-else>{{ scope.row.missingId }}</span>
            </span>
            <span v-else-if="item.missingLevel">
              {{ scope.row.missingLevelDesc || "-" }}
            </span>
            <span v-else-if="item.rectifyStatus">
              <px-tag
                v-if="scope.row.rectifyStatus"
                effect="plain"
                :style="{
                  color: `${tagColorList[scope.row.rectifyStatus]}`,
                  border: `1px solid ${tagBorderColorList[scope.row.rectifyStatus]}`,
                  backgroundColor: `${tagBgColorList[scope.row.rectifyStatus]}`
                }"
              >
                {{ scope.row.rectifyStatusDesc }}
              </px-tag>
              <span v-else>-</span>
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="100" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_FAULT_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_INSPECT_FAULT"
});
import { getEnumDefect, queryDefect } from "@/api/defect";
import { isHasPermission } from "@/utils/auth";
import { stringTrimOfParams } from "@/utils/common";
import { getEmployeeIdAndName } from "@/utils/pengxi";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { getCurrentInstance, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const tagColorList = {
  UNRESPONSE: "#EF4444", // 未响应
  UNDO: "#F59E0B", // 待整改
  DOING: "#3B82F6", // 整改中
  DELAY: "#EF4444", // 延期整改
  DONE: "#10B981" // 整改完成
};
const tagBorderColorList = {
  UNRESPONSE: "#FAC7C7", // 未响应
  UNDO: "#FCE2B6", // 待整改
  DOING: "#C6E2FF", // 整改中
  DELAY: "#FAC7C7", // 延期整改
  DONE: "#B7EAD9" // 整改完成
};
const tagBgColorList = {
  UNRESPONSE: "#FEECEC", // 未响应
  UNDO: "#FEF5E6", // 待整改
  DOING: "#ECF5FF", // 整改中
  DELAY: "#FEECEC", // 延期整改
  DONE: "#E8F8F3" // 整改完成
};
const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  missingLevelList: [],
  missingTypeList: [],
  missingResourceList: [],
  reportUserList: [],
  rectifyStatusList: [],
  missingOwnerList: [],
  queryParams: {
    missingId: "",
    relationNumber: "",
    className: "",
    missingType: "",
    rectifyStatus: "",
    missingResource: "INSPECT",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "relationNumber", label: "任务编号", minWidth: "80", showOverflowTooltip: true, fixed: "left" },
    { prop: "missingId", label: "缺失编号", minWidth: "155", showOverflowTooltip: true, fixed: "left", missingId: true },
    { prop: "classNameDesc", label: "科室", minWidth: "60", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "160", showOverflowTooltip: true },
    { prop: "missingTypeDesc", label: "缺失类型", minWidth: "80", showOverflowTooltip: true },
    { prop: "missingDesc", label: "缺失描述", minWidth: "220", showOverflowTooltip: true },
    { prop: "missingPositionDescAll", label: "位置", minWidth: "220", showOverflowTooltip: true },
    { prop: "reportUser", label: "填报人", minWidth: "120", showOverflowTooltip: true },
    { prop: "rectifyTime", label: "结案时间", minWidth: "150", showOverflowTooltip: true },
    { prop: "rectifyStatus", label: "状态", minWidth: "75", rectifyStatus: true }
  ],
  tableData: [],
  total: 0,
  userId: "",
  missingId: "",
  rectifyVisible: false
});
const {
  missingLevelList,
  missingTypeList,
  missingResourceList,
  reportUserList,
  rectifyStatusList,
  missingOwnerList,
  queryParams,
  tableColumns,
  tableData,
  total,
  userId,
  missingId
} = toRefs(state);

// 进入页面时触发
onMounted(() => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  userId.value = userInfo.userId;
  querySelect();
  queryTable();
});
// 获取下拉框
const querySelect = async () => {
  const list: any = await getEnumDefect();
  missingLevelList.value = Object.keys(list?.MISSING_LEVEL).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_LEVEL[item]
  }));
  missingTypeList.value = Object.keys(list?.MISSING_TYPE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_TYPE[item]
  }));
  missingResourceList.value = Object.keys(list?.MISSING_RESOURCE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_RESOURCE[item]
  }));
  rectifyStatusList.value = Object.keys(list?.RECTIFY_STATUS).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.RECTIFY_STATUS[item]
  }));
  const data = await getEmployeeIdAndName();
  reportUserList.value = JSON.parse(JSON.stringify(data));
  missingOwnerList.value = JSON.parse(JSON.stringify(data));
};
// 查询并导出
const batchDownload = async () => {
  await queryTable();
  const params = {
    missingId: queryParams.value.missingId,
    relationNumber: queryParams.value.relationNumber,
    className: queryParams.value.className,
    missingType: queryParams.value.missingType,
    rectifyStatus: queryParams.value.rectifyStatus,
    missingResource: queryParams.value.missingResource,
    startTime: queryParams.value.startTime,
    endTime: queryParams.value.endTime
  };
  proxy.download("post", "/digitaltwins/api/v1/missing/exportData", params, "巡检缺失.xlsx");
};
// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await queryDefect(stringTrimOfParams(params));
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 获取开始日期及结束日期
const changeDate = val => {
  if (val && val.length > 0) {
    queryParams.value.startTime = val[0] + " 00:00:00";
    queryParams.value.endTime = val[1] + " 23:59:59";
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    missingId: "",
    relationNumber: "",
    className: "",
    missingType: "",
    rectifyStatus: "",
    startTime: "",
    endTime: "",
    missingResource: "INSPECT",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 查看详情
const handleView = (row: any) => {
  missingId.value = row.missingId;
  router.push(`/all/safeManage/defect?id=${row.missingId}`);
};
// 课室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.flex-end {
  justify-content: flex-end;
  text-align: right;
}
</style>
